<template>
  <div class="baseinfo">
      <MyHeader />
      <div class="titleBg">
          变更前的营业期限
      </div>
      <table class="tbstyle" width="100%">
          <tr>
              <td class="tbstyle_left" style="width:140px;">营业期限</td>
              <td>30年</td>
          </tr> 
      </table>  
      <div class="titleBg">
          变更后的营业期限
      </div>
      <Form class="baseinfo_form"  label-position="left"  ref="entForm" :model="entForm" >
      <FormItem class="baseinfo_select" style="border-top: 1px solid #BFE5F5;" label="营业期限" :label-width="140" prop='tradeterm' :rules="validator.must">
        <Select v-model="entForm.tradeterm" placeholder="营业期限">
          <Option value="5">5年</Option>
          <Option value="10">10年</Option>
          <Option value="20">20年</Option>
          <Option value="30">30年</Option>
          <Option  value="-1">长期</Option>
        </Select>
      </FormItem>
    </Form>
    <div class="changeComTerm">
      <Button @click="gotoNext" class="mainBtn" size="large" long type="primary">下一步</Button>
      <MyFooter />
    </div>  
  </div>
</template>

<script>
import MyHeader from '../../components/MyHeader2.vue'
import MyFooter from '../../components/MyFooter.vue'
import request from '../../utils/request'
import dictutil from '../../assets/js/dictutil'
import validator from '../../utils/validatorUtil.js'
export default {
  data() {
    return {
      validator,
      entForm: {}
    }
  },
  components: {
    MyHeader,
    MyFooter
  },
  methods: {
    gotoNext() {
         this.$refs['entForm'].validate((valid) => {
          if (valid) {
            this.$router.push('/changeComContact')
          } else {
            this.$ErrorAlert('数据未填写完全，请注意红色标记')
          }
        })
    }
  },
  mounted() {
      
  }
}
</script>
<style>
.changeComTerm {
 padding:0.5rem;
}
.titleBg {font-size:0.57rem;padding:0.5rem;}
.mainBtn {
  height:1.75rem;font-size:0.64rem;
}
.tbstyle {font-size:0.5rem;border-collapse: collapse;}
.tbstyle td {border:1px solid #BFE5F5;font-size:0.5rem;padding: 0.3rem;}
.tbstyle .tbstyle_left {background:#F5FAFD;color:#2D8CF0;white-space: nowrap}
.red {color:#c00;}
</style>

<style lang="scss">
.baseinfo {
  position: relative;
  min-height: 100%;
  &_space {
    height: 0.54rem;
  }
  &_form {
    .ivu-form-item {
      margin-bottom: 0;
      border-bottom: 1px solid #BFE5F5;
      label {
        height: 1.75rem;
        line-height: 1.75rem;
        padding: 0 0 0 0.3rem;
        font-size:0.5rem;
        background:#F5FAFD;color:#2D8CF0;
        border-right: 1px solid #BFE5F5;
      }
      input {
        height: 1.75rem;
        border: none;
        padding-left:0.5rem;
        font-size: 0.5rem;
        border-radius: 0;
        &:hover {
          border: none;
        }
        &:focus {
          border: none;
          box-shadow: none;
        }
        &::-webkit-input-placeholder {
          text-align: right;
        }
        &::-moz-placeholder {
          text-align: right;
        }
        &:-ms-input-placeholder {
          text-align: right;
        }
      }
    }
  }
  &_select {
    .ivu-form-item-content {
      padding-left: 0.5rem;
      .ivu-select-selection {
        border: none;
        box-shadow: none;
        height: 100%;
        .ivu-select-selected-value {
          height: 1.75rem;
          line-height: 1.75rem;
          font-size: 0.5rem;
          padding-left: 0;
        }
        .ivu-select-placeholder {
          height: 1.75rem;
          line-height: 1.75rem;
          font-size: 0.5rem;
          padding-left: 0;
        }
      }
    }
  }
  .rightSpan{
    width: 100%;
    .ivu-input-wrapper{
      width: 80%;
      float: left;
    }
    span{
      width: 20%;
      float: right;
      line-height: 1.75rem;
      text-align: right;
    }
  }
}
</style>

